import {
	Button,
	Collapse,
	Form,
	Row,
	Col,
	Input,
	Select,
	message,
	DatePicker,
} from 'antd'
import React, {useState, useEffect, memo} from 'react'
import {history, connect} from 'umi'
import moment from 'moment'
import styles from './index.less'
import {editLicence, viewLicence} from '@/service/carMessage/licence'
import {
	carStatus,
	operationType,
	licenseProperty,
	isGasCylinderCar,
	complianceStatus,
} from '../../dict'
import {getHolderDictInfo} from '@/service/common'
import {getXZCarTypeList} from '@/service/carMessage/list'
import UploadAvatar from '@/components/UploadAvatar'
import {getImageUrlList, IImageItemParams} from '@/utils/image'
import 'moment/locale/zh-cn'
import {modelSeriesFun} from '@/utils/common'

// 全局定义所有车辆证照相关的图片与后端约定好的index。不可前端做修改需保证与后端一致
export const ImeagTargetAttrIndex = {
	drivingLicenseFront: 2, // 行驶证正面
	drivingLicenseBehind: 3, // 行驶证副本
	gasVehicle: 8, // 气瓶证信息
	onLineCarLicence: 12, // 网约车运输证
	motorVehicle: 10, // 机动车登记证
}

const {Panel} = Collapse
const customizeHeader = (value: string) => (
	<div>
		<div className={styles.tip} />
		{value}
	</div>
)

const licenceEdit = memo((props: any) => {
	const [type, setType] = useState<string>()
	const [form] = Form.useForm<any>()

	const [licenceId, setLicenceId] = useState()
	const [carTypeList, setCarTypeList] = useState<any>([])
	const [fileList, setFileList] = useState<any>([])
	// 持有方数据
	const [holderDict, setHolderDict] = useState([])
	/** 获取持有方数据 */
	const getHolderDictInfoFun = () => {
		getHolderDictInfo({type: 'holder'}).then((res: any) => {
			if (res?.success) {
				setHolderDict(res?.data)
			}
		})
	}
	// 获取品牌车系
	const onCarTypeListFun = () => {
		getXZCarTypeList().then((res: any) => {
			if (res?.success) {
				setCarTypeList(modelSeriesFun(res.data))
			}
		})
	}

	useEffect(() => {
		getHolderDictInfoFun()
		onCarTypeListFun()
	}, [])

	// 初始化-图片链接列表
	const getFileList = (imageList: Array<IImageItemParams>) => {
		const list = getImageUrlList(imageList)
		setFileList(list)
	}
	// 初始化-详情数据
	const getView = (id: string) => {
		viewLicence({id}).then((res: any) => {
			if (res?.success) {
				form.setFieldsValue({
					...res.data,
					licenseRegisterTime: res?.data?.licenseRegisterTime
						? moment(res?.data?.licenseRegisterTime)
						: '',
					licenseEndTime: res?.data?.licenseEndTime
						? moment(res?.data?.licenseEndTime)
						: '',
					gasExpirationTime: res?.data?.gasExpirationTime
						? moment(res?.data?.gasExpirationTime)
						: '',
					carHailingRegisterTime: res?.data?.carHailingRegisterTime
						? moment(res?.data?.carHailingRegisterTime)
						: '',
					carHailingEffectTime: res?.data?.carHailingEffectTime
						? moment(res?.data?.carHailingEffectTime)
						: '',
					carHailingInspectionTime: res?.data
						?.carHailingInspectionTime
						? moment(res?.data?.carHailingInspectionTime)
						: '',
					carHailingFirstApplyTime: res?.data
						?.carHailingFirstApplyTime
						? moment(res?.data?.carHailingFirstApplyTime)
						: '',
					carHailingSecondApproveTime: res?.data
						?.carHailingSecondApproveTime
						? moment(res?.data?.carHailingSecondApproveTime)
						: '',
				})
				getFileList([
					{
						id: res?.data?.drivingLicenseFront,
						targetAttr: ImeagTargetAttrIndex.drivingLicenseFront,
						name: '行驶证正面',
					},
					{
						id: res?.data?.drivingLicenseBehind,
						targetAttr: ImeagTargetAttrIndex.drivingLicenseBehind,
						name: '行驶证副本',
					},
					{
						id: res?.data?.gasVehicle,
						targetAttr: ImeagTargetAttrIndex.gasVehicle,
						name: '气瓶证信息',
					},
					{
						id: res?.data?.onLineCarLicence,
						targetAttr: ImeagTargetAttrIndex.onLineCarLicence,
						name: '网约车运输证',
					},
					{
						id: res?.data?.motorVehicle,
						targetAttr: ImeagTargetAttrIndex.motorVehicle,
						name: '机动车登记证',
					},
				])
			}
		})
	}

	// 根据路由判断当前页面状态
	useEffect(() => {
		const {id} = props.location.query
		if (id) {
			getView(id)
			setLicenceId(id)
		}
		const hrefs = window.location.href
		if (hrefs.includes('view')) {
			setType('view')
		} else {
			setType('edit')
		}
	}, [])

	const jszzmUploadProps = {
		text: '添加文件',
		modelName: 'LICENCE_FJ',
		targetAttr: ImeagTargetAttrIndex.drivingLicenseFront,
		list: fileList,
		accept: 'image/jpg,image/jpeg,image/png',
		moreNum: 1,
		callback: (res: any) => {
			form.setFieldsValue({
				drivingLicenseFront: res?.file?.response?.data?.id,
				licenseUpdateTime: moment().format('YYYY-MM-DD HH:mm:ss'),
			})
		},
	}

	const jszfmUploadProps = {
		text: '添加文件',
		modelName: 'LICENCE_FJ',
		list: fileList,
		accept: 'image/jpg,image/jpeg,image/png',
		targetAttr: ImeagTargetAttrIndex.drivingLicenseBehind,
		moreNum: 1,
		callback: (res: any) => {
			form.setFieldsValue({
				drivingLicenseBehind: res?.file?.response?.data?.id,
				licenseUpdateTime: moment().format('YYYY-MM-DD HH:mm:ss'),
			})
		},
	}
	const gasVehicleUploadProps = {
		text: '添加文件',
		modelName: 'LICENCE_FJ',
		list: fileList,
		accept: 'image/jpg,image/jpeg,image/png',
		targetAttr: ImeagTargetAttrIndex.gasVehicle,
		moreNum: 1,
		callback: (res: any) => {
			form.setFieldsValue({
				gasVehicle: res?.file?.response?.data?.id,
				gasUpdateTime: moment().format('YYYY-MM-DD HH:mm:ss'),
			})
		},
	}
	const wycyszUploadProps = {
		text: '添加文件',
		modelName: 'LICENCE_FJ',
		list: fileList,
		accept: 'image/jpg,image/jpeg,image/png',
		targetAttr: ImeagTargetAttrIndex.onLineCarLicence,
		moreNum: 1,
		callback: (res: any) => {
			form.setFieldsValue({
				onLineCarLicence: res?.file?.response?.data?.id,
				carHailingUpdateTime: moment().format('YYYY-MM-DD HH:mm:ss'),
			})
		},
	}

	const dscdjzUploadProps = {
		text: '添加文件',
		modelName: 'LICENCE_FJ',
		list: fileList,
		accept: 'image/jpg,image/jpeg,image/png',
		targetAttr: ImeagTargetAttrIndex.motorVehicle,
		moreNum: 1,
		callback: (res: any) => {
			form.setFieldsValue({
				motorVehicle: res?.file?.response?.data?.id,
			})
		},
	}

	// 保存
	const onSubmit = async () => {
		const formData = await form.validateFields()
		editLicence({
			id: licenceId,
			...formData,
			licenseRegisterTime: moment(formData?.licenseRegisterTime).format(
				'YYYY-MM-DD HH:mm:ss',
			),
			licenseEndTime: moment(formData?.licenseEndTime).format(
				'YYYY-MM-DD HH:mm:ss',
			),
			gasExpirationTime: moment(formData?.gasExpirationTime).format(
				'YYYY-MM-DD HH:mm:ss',
			),
			carHailingRegisterTime: moment(
				formData?.carHailingRegisterTime,
			).format('YYYY-MM-DD HH:mm:ss'),
			carHailingEffectTime: moment(formData?.carHailingEffectTime).format(
				'YYYY-MM-DD HH:mm:ss',
			),
			carHailingInspectionTime: moment(
				formData?.carHailingInspectionTime,
			).format('YYYY-MM-DD HH:mm:ss'),
			carHailingFirstApplyTime: moment(
				formData?.carHailingFirstApplyTime,
			).format('YYYY-MM-DD HH:mm:ss'),
			carHailingSecondApproveTime: moment(
				formData?.carHailingSecondApproveTime,
			).format('YYYY-MM-DD HH:mm:ss'),
		})
			.then((res) => {
				if (res.success) {
					message.success(res.msg)
					history.goBack()
				}
			})
			.catch((err) => {
				message.error(err)
			})
	}

	return (
		<div className={styles.admittanceAdd}>
			<div className={`${styles.content} ${styles.formDetils}`}>
				<Collapse
					defaultActiveKey={['1', '2']}
					ghost
					expandIconPosition="end">
					<Panel header={customizeHeader('基础信息')} key="1">
						<Form
							form={form}
							name="basic"
							layout="horizontal"
							labelCol={{flex: '180px'}}
							labelAlign="right"
							labelWrap
							initialValues={{remember: true}}
							autoComplete="off"
							disabled={type === 'view'}>
							<Row gutter={12}>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="车辆状态"
										name="carStatus">
										<Select
											disabled
											placeholder="请选择"
											fieldNames={{
												value: 'key',
												label: 'label',
											}}
											options={[...carStatus]}
										/>
									</Form.Item>
								</Col>

								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="运营分类"
										name="selfManaged">
										<Select
											disabled
											placeholder="请选择"
											fieldNames={{
												value: 'key',
												label: 'label',
											}}
											options={[...operationType]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="所属公司"
										name="companyName">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="注册城市" name="cityName">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="持有方" name="holderId">
										<Select
											placeholder="请选择"
											fieldNames={{
												value: 'value',
												label: 'valueName',
											}}
											options={[...holderDict]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="车辆ID" name="carId">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="车架号" name="vin">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="品牌车系车型"
										name="carBrandSeries">
										<Select
											disabled
											placeholder="请选择"
											fieldNames={{
												value: 'key',
												label: 'label',
											}}
											options={[...carTypeList]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item label="车牌号" name="carPlateNo">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="车牌性质"
										name="numberType">
										<Select
											disabled
											placeholder="请选择"
											fieldNames={{
												value: 'key',
												label: 'label',
											}}
											options={[...licenseProperty]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="发动机号"
										name="engineNumber">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col sm={{span: 24}} />
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="行驶证正面"
										name="drivingLicenseFront">
										<UploadAvatar {...jszzmUploadProps} />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="行驶证副本"
										name="drivingLicenseBehind">
										<UploadAvatar {...jszfmUploadProps} />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="行驶证最近更新时间"
										name="licenseUpdateTime"
										rules={[{required: true}]}>
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col sm={{span: 24}} />
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="行驶证编号"
										name="licenseNo"
										rules={[{required: true}]}>
										<Input placeholder="请输入" />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="行驶证/车辆注册日期"
										name="licenseRegisterTime"
										rules={[{required: true}]}>
										<DatePicker
											placeholder="请选择"
											showTime
											format="YYYY-MM-DD HH:mm:ss"
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="行驶证到期日期"
										name="licenseEndTime"
										rules={[{required: true}]}>
										<DatePicker
											placeholder="请选择"
											showTime
											format="YYYY-MM-DD HH:mm:ss"
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="气瓶证信息"
										name="gasVehicle">
										<UploadAvatar
											{...gasVehicleUploadProps}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="气瓶证最近更新时间"
										name="gasUpdateTime">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col sm={{span: 24}} />
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="是否气瓶车辆"
										name="isGasCylinderCar"
										rules={[{required: true}]}>
										<Select
											placeholder="请选择"
											fieldNames={{
												value: 'key',
												label: 'label',
											}}
											options={[...isGasCylinderCar]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="气瓶检到期日期"
										name="gasExpirationTime">
										<DatePicker
											placeholder="请选择"
											showTime
											format="YYYY-MM-DD HH:mm:ss"
										/>
									</Form.Item>
								</Col>
								<Col sm={{span: 24}} />
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="网约车运输证"
										name="onLineCarLicence">
										<UploadAvatar {...wycyszUploadProps} />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="网约车证最近更新时间"
										name="carHailingUpdateTime">
										<Input placeholder="请输入" disabled />
									</Form.Item>
								</Col>
								<Col sm={{span: 24}} />
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="符合网约车"
										name="compliance"
										rules={[{required: true}]}>
										<Select
											placeholder="请选择"
											fieldNames={{
												value: 'key',
												label: 'label',
											}}
											options={[...complianceStatus]}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="网约车运输资格证证号"
										name="carHailingLicNo"
										rules={[{required: true}]}>
										<Input placeholder="请输入" />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="网约车证发证日期"
										name="carHailingRegisterTime"
										rules={[{required: true}]}>
										<DatePicker
											placeholder="请选择"
											showTime
											format="YYYY-MM-DD HH:mm:ss"
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="网约车证有效期"
										name="carHailingEffectTime"
										rules={[{required: true}]}>
										<DatePicker
											placeholder="请选择"
											showTime
											format="YYYY-MM-DD HH:mm:ss"
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="运营检日期"
										name="carHailingInspectionTime"
										rules={[{required: true}]}>
										<DatePicker
											placeholder="请选择"
											showTime
											format="YYYY-MM-DD HH:mm:ss"
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="网约车证初审申请日期"
										name="carHailingFirstApplyTime"
										rules={[{required: true}]}>
										<DatePicker
											placeholder="请选择"
											showTime
											format="YYYY-MM-DD HH:mm:ss"
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="网约车证复审通过日期"
										name="carHailingSecondApproveTime"
										rules={[{required: true}]}>
										<DatePicker
											placeholder="请选择"
											showTime
											format="YYYY-MM-DD HH:mm:ss"
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="网约车运输证所有人"
										name="carHailingOwner"
										rules={[{required: true}]}>
										<Input placeholder="请输入" />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="网约车运输证签发机关"
										name="carHailingIssuing"
										rules={[{required: true}]}>
										<Input placeholder="请输入" />
									</Form.Item>
								</Col>
								<Col sm={{span: 24}} />
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 8}}>
									<Form.Item
										label="机动车登记证"
										name="motorVehicle">
										<UploadAvatar {...dscdjzUploadProps} />
									</Form.Item>
								</Col>
							</Row>
						</Form>
					</Panel>
				</Collapse>
				<div className={styles.wrap}>
					<Button
						onClick={() => {
							history.go(-1)
						}}>
						取消
					</Button>
					{type === 'add' || type === 'edit' ? (
						<>
							<Button
								type="primary"
								htmlType="submit"
								onClick={onSubmit}>
								保存
							</Button>
						</>
					) : (
						''
					)}
				</div>
			</div>
		</div>
	)
})
export default connect(({user}: any) => ({user, global}))(licenceEdit)
